<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员中心</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="jquery/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="art-template/template-web.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <!-- 第一栏 -->
    <div class="header">
        <div class="header-userpic">
            <img src="./images/user-img.jpg" alt="">
        </div>
        <div class="header-username" id="user_name">
            <script type="text/html" id="user_name_tpl">
                <span>{{username}}</span>
            </script>
        </div>
        <div class="header-userinf">
            <div class="userinf-score" id="user_score">
                 <script type="text/html" id="user_score_tpl">
                    <span>{{userscore}}</span>
                    <span>我的积分</span>
                 </script>
            </div>
            <div class="userinf-ranking" id="user_ranking">
                <script type="text/html" id="user_ranking_tpl">
                    <span>{{userranking}}</span>
                    <span>积分排名</span>
                </script>
            </div>
        </div>
    </div>
    <!-- 第二栏 -->
    <div class="menu">
        <a href="javascript:void(0)" class="menu-block" id="score_explain">
            <img src="./images/menu-block-1.png" alt="">
            <span>积分说明</span>
        </a>
        <a href="" class="menu-block">
            <img src="./images/menu-block-2.png" alt="">
            <span>我的资料</span>
        </a>
        <a href="javascript:void(0)" class="menu-block" id="score_board">
            <img src="./images/menu-block-3.png" alt="">
            <span>积分排名</span>
        </a>
        <a href="" class="menu-block">
            <img src="./images/menu-block-4.png" alt="">
            <span>敬请期待</span>
        </a>
        <a href="" class="menu-block">
            <img src="./images/menu-block-5.png" alt="">
            <span>积分商城</span>
        </a>
        <a href="javascript:void(0)" class="menu-block" id="sign">
            <img src="./images/menu-block-6.png" alt="">
            <span>每日签到</span>
        </a>

    </div>
    <!-- 第三栏 -->
    <div class="introduce">
        <h3>积分奖励计划</h3>
        <ul>
            <li>1.新会员首次关注公众号送30积分（取消后重新关注不再送）。</li>
            <li>2.签到送积分：每日1次签到机会，可赚3积分；</li>
            <li>3.活动送积分：敬请关注我们每月发布的活动，不要错过参与活动赚取更多积分的机会！</li>
            <li>4.积分有效期为2年（自积分计入会员账户之日起计算）超期未使用积分将会清零；</li>
            <li>5.积分不可转让，不可折现；</li>
            <li>6.不支持会员账户积分合并；</li>
            <li>7.如遇恶意盗扫领取积分，经核实后将冻结违规者会员积分账户，直至问题处理完毕；</li>
            <li>8.杭州顶津食品有限公司是本平台的所有者，拥有本会员系统的最终解释权。</li>
        </ul>
    </div>
    <!-- 积分说明 -->
    <div class="scoreexplain">
        <h3>积分说明</h3>
        <ul>
            <li>1.新会员首次关注公众号送30积分（取消后重新关注不再送）。</li>
            <li>2.签到送积分：每日1次签到机会，可赚3积分；</li>
            <li>3.活动送积分：敬请关注我们每月发布的活动，不要错过参与活动赚取更多积分的机会！</li>
        </ul>
    </div>
    <!-- 积分榜 -->
    <div class="scoreboard">
        <div class="scoreboard-header">积分排名</div>
        <div class="scoreboard-main" id="scoreboard">
            <script type="text/html" id="scoreboard_tpl">
                {{each user}}
                <div class="scoreboard-mian-block">
                    <div class="block-userpic">
                        <img src="./images/user-img.jpg" alt="">
                        <div class="userpic-rankicon">{{$value.rank}}</div>
                    </div>
                    <div class="block-username">{{$value.name}}</div>
                    <div class="block-userscore">{{$value.score}}</div>
                </div>
                {{/each}}
            </script>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="cover"></div>
    <!-- 弹窗 -->
    <div class="sign-pop">
        <div class="pop-header">
            <img src="./images/pop-header-bg.png" alt="">
            <span>每日签到</span>
        </div>
        <div class="pop-main">
            <div class="pop-main-box"></div>
            <div class="pop-main-subhead" id="user_signdays">
                <script type="text/html" id="user_signdays_tpl">
                    <span>你连续签到第{{usersigndays}}天</span>
                </script>
                </div>
            <div class="pop-main-checks">
                <div class="pop-main-check">
                    <div class="check-box" id="check_1">
                        <img src="./images/coin.png" alt="">
                        <span>积分+3</span>
                    </div>
                    <span>第1天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_2">
                        <img src="./images/coin.png" alt="">
                        <span>积分+3</span>
                    </div>
                    <span>第2天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_3">
                        <img src="./images/coin.png" alt="">
                        <span>积分+5</span>
                    </div>
                    <span>第3天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_4">
                        <img src="./images/coin.png" alt="">
                        <span>积分+5</span>
                    </div>
                    <span>第4天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_5">
                        <img src="./images/coin.png" alt="">
                        <span>积分+5</span>
                    </div>
                    <span>第5天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_6">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第6天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_7">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第7天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_8">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第8天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_9">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第9天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_10">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第10天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_11">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第11天</span>
                </div>
                <div class="pop-main-check">
                    <div class="check-box" id="check_12">
                        <img src="./images/coin.png" alt="">
                        <span>积分+10</span>
                    </div>
                    <span>第12天</span>
                </div>

            </div>
        </div>
    </div>

</body>
</html>